import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuthStore } from '../../stores/authStore';
import { useThemeStore } from '../../stores/themeStore';
import { getTheme } from '../../theme/config';
import LoadingSpinner from '../../components/common/LoadingSpinner';
import { motion } from 'framer-motion';

const DashboardPage: React.FC = () => {
  const navigate = useNavigate();
  const { user, logout, isLoading, isAuthenticated } = useAuthStore();
  const { mode } = useThemeStore();
  const theme = getTheme(mode);
  const [pageLoading, setPageLoading] = useState(false);

  // 如果用户未认证，ProtectedRoute 会处理重定向
  // 这里不需要额外的认证检查

  const handleLogout = async () => {
    setPageLoading(true);
    try {
      logout();
      navigate('/login', { replace: true });
    } catch (error) {
      console.error('Logout error:', error);
    } finally {
      setPageLoading(false);
    }
  };

  // 如果全局认证状态还在加载中
  if (isLoading) {
    return <LoadingSpinner fullScreen />;
  }

  // 如果页面级操作正在加载
  if (pageLoading) {
    return (
      <LoadingSpinner fullScreen>
        <div style={{ color: theme.textPrimary, marginTop: '20px' }}>
          正在处理...
        </div>
      </LoadingSpinner>
    );
  }

  return (
    <motion.div 
      style={{ 
        position: 'relative', 
        width: '100%', 
        height: '100vh', 
        overflow: 'hidden',
        background: theme.contentBackground,
        color: theme.textPrimary,
        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
      }}
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.3 }}
    >
      {/* 毛玻璃导航栏 */}
      <motion.nav 
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          zIndex: 3,
          padding: '1rem 2rem',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          backgroundColor: theme.headerBackground,
          backdropFilter: 'blur(10px)',
          borderBottom: `1px solid ${theme.headerBorderColor}`,
          color: theme.textPrimary
        }}
        initial={{ y: -50, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ duration: 0.5 }}
      >
        <motion.div 
          style={{
            display: 'flex',
            alignItems: 'center',
            fontWeight: 'bold',
            fontSize: '1.2rem',
            color: theme.logoColor
          }}
          whileHover={{ scale: 1.05 }}
        >
          <motion.span 
            style={{ marginRight: '0.5rem' }}
            animate={{ 
              rotate: [0, 10, -10, 0],
              transition: { 
                duration: 2,
                repeat: Infinity,
                repeatType: "reverse"
              }
            }}
          >
            ⚡
          </motion.span>
          React Bits
        </motion.div>
        <div style={{
          display: 'flex',
          gap: '2rem',
          alignItems: 'center'
        }}>
          <motion.span 
            style={{ color: theme.textPrimary }}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.5, delay: 0.2 }}
          >
            Welcome, {user?.username || user?.email}
          </motion.span>
          <motion.button
            onClick={handleLogout}
            style={{
              padding: '0.5rem 1rem',
              color: theme.textPrimary,
              background: `linear-gradient(135deg, ${theme.glowColor}20 0%, ${theme.glowColor}10 100%)`,
              border: `1px solid ${theme.cardBorder}`,
              borderRadius: '4px',
              cursor: 'pointer',
              transition: 'all 0.3s ease',
              backdropFilter: 'blur(10px)',
              fontWeight: 500
            }}
            whileHover={{ 
              background: `linear-gradient(135deg, ${theme.glowColor}40 0%, ${theme.glowColor}20 100%)`,
              y: -2,
              boxShadow: `0 4px 12px ${theme.glowColor}40`
            }}
            whileTap={{ scale: 0.95 }}
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.3, delay: 0.3 }}
          >
            Logout
          </motion.button>
        </div>
      </motion.nav>
      
      {/* 主内容区域 */}
      <div style={{ 
        position: 'relative', 
        zIndex: 2,
        width: '100%',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        padding: '20px',
        paddingTop: '80px'
      }}>
        <motion.div 
          style={{
            width: '100%',
            maxWidth: '800px',
            padding: '2.5rem',
            backgroundColor: theme.cardBackground,
            backdropFilter: 'blur(15px)',
            border: `1px solid ${theme.cardBorder}`,
            borderRadius: '20px',
            boxShadow: theme.cardShadow,
            color: theme.textPrimary
          }}
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.4 }}
        >
          <motion.h1 
            style={{
              fontSize: '2rem',
              fontWeight: 'bold',
              marginBottom: '1rem',
              background: `linear-gradient(90deg, ${theme.textPrimary}, ${theme.glowColor})`,
              WebkitBackgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
              textShadow: `0 0 10px ${theme.glowColor}60`,
              fontFamily: 'inherit'
            }}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.5, delay: 0.5 }}
          >
            Dashboard
          </motion.h1>
          
          <motion.div 
            style={{
              marginBottom: '2rem',
              color: theme.textPrimary
            }}
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.3, delay: 0.6 }}
          >
            <h2 style={{ 
              color: theme.textPrimary,
              borderBottom: `1px solid ${theme.cardBorder}`,
              paddingBottom: '0.5rem',
              fontSize: '1.5rem',
              fontWeight: 600
            }}>
              User Information
            </h2>
            <div style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(2, 1fr)',
              gap: '1rem',
              marginTop: '1rem'
            }}>
              <motion.div
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.3, delay: 0.7 }}
              >
                <p style={{ marginBottom: '0.5rem' }}><strong style={{ color: theme.textSecondary }}>Username:</strong> <span style={{ color: theme.textPrimary }}>{user?.username || 'N/A'}</span></p>
                <p style={{ marginBottom: '0.5rem' }}><strong style={{ color: theme.textSecondary }}>Email:</strong> <span style={{ color: theme.textPrimary }}>{user?.email || 'N/A'}</span></p>
                <p style={{ marginBottom: '0.5rem' }}><strong style={{ color: theme.textSecondary }}>User ID:</strong> <span style={{ color: theme.textPrimary }}>{user?.id || 'N/A'}</span></p>
              </motion.div>
              <motion.div
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.3, delay: 0.8 }}
              >
                <p style={{ marginBottom: '0.5rem' }}><strong style={{ color: theme.textSecondary }}>Super User:</strong> <span style={{ color: theme.textPrimary }}>{user?.is_superuser ? 'Yes' : 'No'}</span></p>
                <p style={{ marginBottom: '0.5rem' }}><strong style={{ color: theme.textSecondary }}>Active:</strong> <span style={{ color: theme.textPrimary }}>{user?.is_active ? 'Yes' : 'No'}</span></p>
                <p style={{ marginBottom: '0.5rem' }}><strong style={{ color: theme.textSecondary }}>Last Login:</strong> <span style={{ color: theme.textPrimary }}>{user?.last_login_at || 'Never'}</span></p>
              </motion.div>
            </div>
          </motion.div>
          
          <motion.div 
            style={{
              color: theme.textPrimary
            }}
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.3, delay: 0.9 }}
          >
            <h2 style={{ 
              color: theme.textPrimary,
              borderBottom: `1px solid ${theme.cardBorder}`,
              paddingBottom: '0.5rem',
              fontSize: '1.5rem',
              fontWeight: 600
            }}>
              Welcome to Your Dashboard
            </h2>
            <motion.p 
              style={{ 
                marginTop: '1rem',
                color: theme.textSecondary,
                lineHeight: '1.6',
                fontSize: '1rem'
              }}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.3, delay: 1.0 }}
            >
              This is your personalized dashboard. Here you can manage your account settings, 
              view your activity, and access various features of the application.
            </motion.p>
            <motion.p 
              style={{ 
                marginTop: '1rem',
                color: theme.textSecondary,
                lineHeight: '1.6',
                fontSize: '1rem'
              }}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.3, delay: 1.1 }}
            >
              As a logged-in user, you now have access to premium features and personalized content.
            </motion.p>
            <motion.button
              onClick={() => navigate('/navigation')}
              style={{
                marginTop: '1rem',
                padding: '0.75rem 1,5rem',
                color: theme.textPrimary,
                background: `linear-gradient(135deg, ${theme.glowColor}20 0%, ${theme.glowColor}10 100%)`,
                border: `1px solid ${theme.cardBorder}`,
                borderRadius: '6px',
                cursor: 'pointer',
                transition: 'all 0.3s ease',
                backdropFilter: 'blur(10px)',
                fontWeight: 500,
                fontSize: '1rem'
              }}
              whileHover={{ 
                background: `linear-gradient(135deg, ${theme.glowColor}40 0%, ${theme.glowColor}20 100%)`,
                y: -2,
                boxShadow: `0 4px 12px ${theme.glowColor}40`
              }}
              whileTap={{ scale: 0.95 }}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.3, delay: 1.2 }}
            >
              Go to Navigation Page
            </motion.button>
          </motion.div>
        </motion.div>
      </div>
      
      <style>
        {`
          @keyframes fadeInUp {
            from {
              opacity: 0;
              transform: translateY(30px);
            }
            to {
              opacity: 1;
              transform: translateY(0);
            }
          }
        `}
      </style>
    </motion.div>
  );
};

export default DashboardPage;